<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      * {
         margin: 0;
         padding: 0;
      }
      li{
         list-style: none;
      }
      .aaa {
         width: 640px;
         height: 340px;
         position: relative;
      }
      .bbb{
         left: 80%;
         top: 0;
         position: absolute;
      }
      .ccc{
         position: absolute;
         left: 50%;
         top: 50%;
         transform: translate(-50% ,-50%);
      }
     .ccc li{
      color: aliceblue;
      font-size: 20px;
      border: 1px solid aliceblue;
      text-align: center;
      }
      .zhongjian{
         width: 640px;
         height: 60px;
      }
      .ddd{
         width: 640px;
         height: 500px;
         position: relative;
         
      }
      .ddd li{
         position: relative;
         border-bottom: 1px solid rgb(180, 174, 174);
      }
      p{
         font-size: 15px;
         position: absolute;
         left: 40px;
         top: 0px;
        
      }
      span{
         float:right;
      }
   </style>
</head>

<body>
   <div class="aaa">
      <ul>
         <li>
            <img src="./imges/bg1.png" alt="">
         </li>
      </ul>
      <div class="bbb">
         <img src="./imges/my.jpg" alt="">&nbsp; &nbsp; &nbsp; 
         <img src="./imges/xiazai.jpg" alt="">
      </div>
      <div class="ccc">
         <img src="./imges/urse2.png" alt="">
         <ul>
            <li>登录</li>
         </ul>
      </div>  
   </div>
   <div class="zhongjian"></div>
   <div class="ddd">
      <ul>
         <li>
            <img src="./imges/icon1.png" alt="">
             <p>我关注的房源</p>  
           <span><img src="./imges/right.png" alt=""  ></span>
       </li>
         <br>
         <li>
            <img src="./imges/icon2.png" alt="" class="d2">
            <p>我关注的小区</p>  
            <span><img src="./imges/right.png" alt=""></span>
         </li>
         <br>
         <li>
            <img src="./imges/icon3.png" alt="" class="d3">
            <p>我关注的新房</p> 
            <span><img src="./imges/right.png" alt=""></span>
         </li>
         <br>
         <li>
            <img src="./imges/icon4.png" alt="" class="d4">
            <p>我的看房记录</p>
            <span><img src="./imges/right.png" alt=""></span>
         </li>
      </ul>
   </div>
</body>

</html>